<template>
	<view class="box">
		<view class="item" v-for="item in ptList" :key="item.sgo_id">
			<view class="avatar">
				<view class="pic">
					<image :src="item.avatar" style="width: 60rpx; height: 60rpx;" mode=""></image>
				</view>
				<view class="name">
					{{item.nickname}}
				</view>
			</view>
			<view class="cz">
				<view class="left">
					<view class="peopleNum">
						还差<span style="color: #6BC665;">{{item.total-item.join.length}}</span>人拼成
					</view>
					<view class="times">
						还剩<u-count-down :timestamp="timestampToTime(item.sgo_timeout)"></u-count-down>
					</view>
				</view>
				<view class="right" @click="joinPt(item)">
					参与拼团
				</view>
			</view>
		</view>
		<u-popup v-model="shows" mode="center" :closeable="true" border-radius="20">
			<view class="ptBox" v-if="selectPeople">
				<view class="title">
					参与李元霸的拼团
				</view>
				<view class="num">
					仅剩<span style="color: #6bc665;">1</span>个名额，<u-count-down :timestamp="timestampToTime(selectPeople.sgo_timeout)"></u-count-down>后结束
				</view>
				<view class="avatarPic">
					<view class="mastePeople">
						<image :src="selectPeople.avatar"
							style="width: 64rpx; height: 64rpx;border-radius: 50%; "></image>
						<span class="name">拼主</span>
					</view>
					<view class="jionPeople" v-for="(item,index) in selectPeople.join" :key="index" >
						<image :src="item.avatar" mode="widthFix" style="width: 64rpx;"></image>
					</view>
					<view class="joinPeople" v-for="(c,index) in people.slice(0,selectPeople.total-1- selectPeople.join.length)" :key="index">
				
					</view>
				</view>
				<view class="btn" @click="goGroupOrder">
					参与拼团
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		getGroupbuyCreate
	} from '@/api/product.js'
	export default {
		data() {
			return {
				goodsInfo: '',
				shows: false,
				ptList:[],
				people: [1, 2, 3, 4, 5],
				selectPeople:'',
				data:"",
				id:""
			}
		},
		onLoad(res) {
			console.log("res",res.id);
			this.initData(res.id)
			this.data = JSON.parse(res.data)
			
		},
		methods: {
			initData(id){
				getGroupbuyCreate(id).then(res=>{
					console.log(res);
					this.ptList = []
					if(res.data){
						res.data.forEach(item=>{
							if(item.total-item.join.length>1){
								this.ptList.push(item)
							}
						})
					}
					
				})
			},
			goGroupOrder() {
				
				uni.redirectTo({
					url: '/page/PtorderConfirm/PtorderConfirm?type=2&goods=' + JSON.stringify(this.data)
				})
				this.shows = false
			},
			timestampToTime(timestamp) {
				timestamp = timestamp ? timestamp : null;
				var timestamp1 = new Date().getTime()
				var timestamp2 = timestamp * 1000 - timestamp1
				if (timestamp2 < 0) {
					return "已过期"
				}
				return timestamp2;
			},
			// 参与拼团
			joinPt(item) {
				let id = uni.getStorageSync("userId")||""
				if(id==item.sgo_userid){
					uni.showToast({
						title:"不能参与自己发起的拼团",
						icon:"none"
					})
					return
				}
				this.id= item.sgo_id
				this.data[0].sgo_id = item.sgo_id
				console.log("参与拼团",item);
				this.shows = true
				this.selectPeople = item
			},
		}

	}
</script>
<style lang="scss" scoped>
	.box {
		background-color: #f5f5f5;
		width: 100vw;
		padding-top: 1px;
	}

	.item {
		width: 750rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		height: 100rpx;
		background: #fff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;

		.avatar {
			display: flex;
			align-items: center;
		}
		.avatar .pic{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			overflow: hidden;
			background-color: #e6e6e6;
		}

		.avatar .name {
			margin-left: 18rpx;
		}

		.cz {
			display: flex;
			align-items: center;

			.left {
				font-size: 22rpx;
				line-height: 30rpx;
				margin-right: 28rpx;

			}

			.left .peopleNum {
				padding: 8rpx 0;
			}

			.left .times {
				padding: 8rpx 0;
			}

			.right {
				width: 140rpx;
				height: 50rpx;
				background: #6BC665;
				border-radius: 10rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 50rpx;
				color: #fff;
			}
		}
	}

	//拼团
	.ptBox {
		width: 480rpx;
		height: 520rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		text-align: center;
		padding: 1rpx;

		.title {
			margin-top: 80rpx;
		}

		.num {
			font-size: 24rpx;
			text-align: center;
			margin: 20rpx 0;
		}

		.avatarPic {
			min-width: 200rpx;
			max-width: 320rpx;
			box-sizing: border-box;
			flex-wrap: wrap;
			align-items: center;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			margin: 60rpx auto;

			.mastePeople {
				position: relative;
				width: 64rpx;
				height: 64rpx;
				margin-top: 20rpx;
				border-radius: 50%;
				background-color: #e6e6e6;

			}

			.mastePeople .name {
				width: 56rpx;
				height: 28rpx;
				background: #FFAA33;
				border-radius: 10rpx;
				position: absolute;
				bottom: -8rpx;
				left: calc(50% - 28rpx);
				font-size: 20rpx;
				font-weight: 400;
				text-align: center;
				color: #FFFFFF;
			}

			.joinPeople {
				border: 1px dashed gray;
				width: 64rpx;
				height: 64rpx;
				background-image: url('/static/123.png');
				background-size: cover;
				background-repeat: no-repeat;
			}
		}

		.btn {
			width: 200rpx;
			height: 60rpx;
			background: #6BC665;
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
			color: #fff;
			margin: 60rpx auto;
		}
	}
</style>